<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy" content="style-src * 'unsafe-inline'; media-src *;script-src * 'unsafe-inline'">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    <!-- All of the Node.js APIs are available in this renderer process. -->
    We are using Node.js <script>document.write(process.versions.node)</script>,
    Chromium <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.
    <section class="make-center">
      <input type="text" id="room-id" value="abcdef" autocorrect=off autocapitalize=off size=20>
      <button id="open-room">Open Room</button>
      <button id="join-room">Join Room</button>
  
      <div id="videos-container"></div>
    </section>
    <script src="Scripts/RTCMultiConnection.min.js"></script>
    <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
  
    <script src="SignalRConnection.js"></script>
    <script src="Scripts/jquery-1.10.2.min.js"></script>
    <script>if (typeof module === 'object') {window.jQuery = window.$ = module.exports;};</script>
    <script src="Scripts/jquery.signalR-2.1.2.min.js"></script>
    <script src="https://192.168.1.3/signalr/hubs"></script>

    <script>
      window.enableAdapter = true; // enable adapter.js
  
      // ......................................................
      // .......................UI Code........................
      // ......................................................
      document.getElementById('open-room').onclick = function () {
        disableInputButtons();
        connection.open(document.getElementById('room-id').value, function () {
        });
      };
  
      document.getElementById('join-room').onclick = function () {
        disableInputButtons();
        connection.join(document.getElementById('room-id').value);
      };
  
      // ......................................................
      // ..................RTCMultiConnection Code.............
      // ......................................................
  
      var connection = new RTCMultiConnection("https19216813");
  
      // using signalR for signaling
      connection.setCustomSocketHandler(SignalRConnection);
  
      connection.session = {
        audio: true,
        video: true
      };
  
      connection.sdpConstraints.mandatory = {
        OfferToReceiveAudio: true,
        OfferToReceiveVideo: true
      };
  
      connection.onstream = function (event) {
        var existing = document.getElementById(event.streamid);
        if (existing && existing.parentNode) {
          existing.parentNode.removeChild(existing);
        }
  
        document.getElementById('videos-container').appendChild(event.mediaElement);
      };
  
      connection.onstreamended = function (event) {
        var mediaElement = document.getElementById(event.streamid);
        if (mediaElement) {
          mediaElement.parentNode.removeChild(mediaElement);
        }
      };
  
      connection.onMediaError = function (e) {
        if (e.message === 'Concurrent mic process limit.') {
          if (DetectRTC.audioInputDevices.length <= 1) {
            alert('Please select external microphone. Check github issue number 483.');
            return;
          }
  
          var secondaryMic = DetectRTC.audioInputDevices[1].deviceId;
          connection.mediaConstraints.audio = {
            deviceId: secondaryMic
          };
  
          connection.join(connection.sessionid);
        }
      };
  
      function disableInputButtons() {
        document.getElementById('open-room').disabled = true;
        document.getElementById('join-room').disabled = true;
        document.getElementById('room-id').disabled = true;
      }
  
      // ......................................................
      // ......................Handling Room-ID................
      // ......................................................
  
      (function () {
        var params = {},
          r = /([^&=]+)=?([^&]*)/g;
  
        function d(s) {
          return decodeURIComponent(s.replace(/\+/g, ' '));
        }
        var match, search = window.location.search;
        while (match = r.exec(search.substring(1)))
          params[d(match[1])] = d(match[2]);
        window.params = params;
      })();
    </script>

    <script>
      // You can also require other files to run in this process
      require('./renderer.js')
    </script>
  </body>
</html>
